.router-warp{
    height:100%;
    position: relative;
}
.router-page{
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}
.pageIn{
    animation: pageIn .5s;
}
.pageHide{
    animation: pageHide .5s forwards;
}
.pageOut{
    animation:pageOut .5s forwards;
}
.pageShow{
    animation:pageShow .5s;
}
@keyframes pageIn{
    from{
        transform:translate3d(100%,0,0);
    }
    to{
        transform:translate3d(0,0,0);
    }
}
@keyframes pageOut{
    from{
        transform:translate3d(0,0,0);
    }
    to{
        transform:translate3d(100%,0,0);
    }
}
@keyframes pageHide{
    from{
        transform:translate3d(0,0,0);
    }
    to{
        transform:translate3d(-30%,0,0)
    }
}
@keyframes pageShow{
    from{
        transform:translate3d(-30%,0,0);
    }
    to{
        transform:translate3d(0,0,0)
    }
}
